<template>
  <div>
    <div class="box">
      <MyDog></MyDog>
     <ChangeColor></ChangeColor>
    </div>

     <div class="box">
      <SellDog v-for="(item,index) in list" :key="index" :dogImgUrl="item.dogImgUrl" :dogName="item.dogName"></SellDog>
     </div>

     <div class="box">
      <SelectDog v-for="(item,index) in list" :key="index" :dogImgUrl="item.dogImgUrl" :dogName="item.dogName" @addname="addname"></SelectDog>
     </div>
      <ul>
        <li v-for="(item,index) in arr" :key="index">{{item}}</li>
      </ul>

      <div class="tb">
        <table>
          <tr is="SellAll"
          v-for="(item,index) in goodsArr" :key="index"
          :goods="item"
          @dealcount="item.count=$event">
          </tr>
        </table>
        <p>All Number:{{all}}</p>
      </div>

      <div class="tb">
        <h3>商品清单如下：</h3>
        <p v-for="(item,index) in goodslist" :key="index">{{item.shopName}}----{{item.price}}元/份</p>
        <h3>请选择购买数量：</h3>
        <BuyGoods v-for="(item,index) in goodslist" :key="index+5" :shopName="item.shopName" v-model="item.count"></BuyGoods>
        <p>总价为：{{sum}}</p>
      </div>


       <table
        border="1"
        width="700"
        style="border-collapse: collapse"
      >
        <caption>
          购物车
        </caption>
        <thead>
          <tr>
            <th>
              <input type="checkbox" v-model="allcheck"/> <span>全选</span>
            </th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr is="MyCart" v-for="(item,index) in goodList" :key="index" :goods="item"
          @dealcheck="item.checked=$event"
          @dealnum="item.num=$event"
          @dealdel="fn"></tr>
        </tbody>
        <tfoot>
          <tr>
            <td>合计:</td>
            <td colspan="5">
              {{sumall}}
            </td>
          </tr>
        </tfoot>
      </table>

      <h3>测试题</h3>
     <MyMath v-for="(item,index) in num" :key="index" @dealres="dealres(index,$event)"></MyMath>
     <div>
      <MyTips v-for="(item,index) in num" :key="index" :index="index" :status="arrindex.includes(index)?reslist[arrindex.findIndex(item=>item===index)]:3"></MyTips>
     </div>
     

     <div id="app">
        <h2>测试题</h2>
        <TeaMath v-for="(item,index) in arr1" :key="index" :num="item"
        @dealsub="item.result=$event"></TeaMath>
        <div>
          <TeaTip v-for="(item,index) in arr1" :key="index" :num="item" :myflag="index"> </TeaTip>
        </div>
      </div>
   </div>
</template>
 
<script>
import ChangeColor from "./day4作业/点击文字变色.vue"
import MyCart from "./day4作业/购物车.vue"
import BuyGoods from "./day4作业/买点好吃的.vue"
import SellAll from "./day4作业/卖完了.vue"
import SellDog from "./day4作业/卖狗.vue"
import MyMath from "./day4作业/数学题.vue"
import MyDog from "./day4作业/喜欢小狗狗吗.vue"
import SelectDog from "./day4作业/选择喜欢的狗.vue"
import MyTips from "./day4作业/MyTips.vue"
import TeaMath from "./day4作业/数学题老师写法.vue"
import TeaTip from "./day4作业/提示老师写法.vue"
export default {
  created(){
    for(let i=0;i<5;i++){
      const left=Math.floor(Math.random()*11)
      const right=Math.floor(Math.random()*11)
      this.arr1.push({left,right,result:null})
    }
  },
  name: "App",
  components: {
    ChangeColor,
    MyCart,
    BuyGoods,
    SellAll,
    SellDog,
    MyMath,
    MyDog,
    SelectDog,
    MyTips,
    TeaMath,
    TeaTip
  },
  props: {},
  data() {
    return {
      list:[
                {
                    dogImgUrl:
                    "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
                    dogName: "博美",
                },
                {
                    dogImgUrl:
                    "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1224576619,1307855467&fm=26&gp=0.jpg",
                    dogName: "泰迪",
                },
                {
                    dogImgUrl:
                    "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2967740259,1518632757&fm=26&gp=0.jpg",
                    dogName: "金毛",
                },
                {
                    dogImgUrl:
                    "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
                    dogName: "哈士奇",
                },
                {
                    dogImgUrl:
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813435580&di=946902d419c3643e33a0c9113fc8d780&imgtype=0&src=http%3A%2F%2Fvpic.video.qq.com%2F3388556%2Fd0522aynh3x_ori_3.jpg",
                    dogName: "阿拉斯加",
                },
                {
                    dogImgUrl:
                    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563813454815&di=ecdd2ebf479568453d704dffacdfa12c&imgtype=0&src=http%3A%2F%2Fwww.officedoyen.com%2Fuploads%2Fallimg%2F150408%2F1-15040Q10J5B0.jpg",
                    dogName: "萨摩耶",
                },
            ],
            arr:[],
            goodsArr: [
                      {
                          count: 0,
                          goodsName: "Watermelon"
                      }, {
                          count: 0,
                          goodsName: "Banana"
                      }, {
                          count: 0,
                          goodsName: "Orange"
                      }, {
                          count: 0,
                          goodsName: "Pineapple"
                      }, {
                          count: 0,
                          goodsName: "Strawberry"
                      }
                  ],
            goodslist:[
              {
                  "shopName": "可比克薯片",
                  "price": 5.5,
                  "count": 0
              },
              {
                  "shopName": "草莓酱",
                  "price": 3.5,
                  "count": 0
              },
              {
                  "shopName": "红烧肉",
                  "price": 55,
                  "count": 0
              },
              {
                  "shopName": "方便面",
                  "price": 12,
                  "count": 0
              }
            ],
            goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
            ], 
            num:5,   
            //reslist:[3,3,3,3,3],
            reslist:[],
            arrindex:[],
            arr1:[]
    };
  },
  computed: {
    all(){
      return this.goodsArr.reduce((sum,item)=>sum+(+item.count),0)
    },
    sum(){
      return this.goodslist.reduce((sum,item)=>sum+item.price*item.count,0)
    },
    sumall(){
      return this.goodList.filter(item=>item.checked===true).reduce((sum,item) => sum+item.price*item.num,0);
    },
    allcheck:{
      get(){
      return this.goodList.every(item=>item.checked===true)
    },
      set(val){
        this.goodList.forEach(item => {
          item.checked=val
        });
      }
    }
  },
  watch: {
  },
  methods: {
    addname(name){
      this.arr.push(name)
    },
    fn(name){
      this.goodList.splice(this.goodList.findIndex(item=>item.name===name),1)
    },
    dealres(index,sta){
      this.arrindex.push(+index)
      this.reslist.push(+sta)
    },
  }
};
</script>

<style scoped>
     .box{
      width: 1000px;
      float: left;
     }
     ul{
      float: left;
     }
     .tb{
      width: 500px;
      height: 400px;
      border: 1px solid #333;
      clear: both;
     }
     table{
      margin: 30px;
      text-align: center;
      width: 500px;
     }
</style>